<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas id="physicsCanvas" width="600" height="480"></canvas>
<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // --- Style Settings ---
    ctx.lineWidth = 2;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineCap = 'round';

    // Helper function for drawing an arrow
    function drawArrow(x1, y1, x2, y2) {
        const headlen = 10; // length of head in pixels
        const dx = x2 - x1;
        const dy = y2 - y1;
        const angle = Math.atan2(dy, dx);
        ctx.beginPath();
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle - Math.PI / 6), y2 - headlen * Math.sin(angle - Math.PI / 6));
        ctx.moveTo(x2, y2);
        ctx.lineTo(x2 - headlen * Math.cos(angle + Math.PI / 6), y2 - headlen * Math.sin(angle + Math.PI / 6));
        ctx.stroke();
    }

    // 1. Draw the ground surface
    ctx.fillStyle = '#EAEAEA'; // Light grey for the ground
    ctx.fillRect(20, 400, 560, 10);
    ctx.beginPath();
    ctx.moveTo(20, 400);
    ctx.lineTo(580, 400);
    ctx.stroke();

    // 2. Draw the table
    // Table top (under the plank)
    ctx.beginPath();
    ctx.rect(100, 235, 350, 10);
    ctx.stroke();

    // Table legs
    ctx.beginPath();
    // Left leg
    ctx.moveTo(150, 245);
    ctx.lineTo(80, 400);
    ctx.moveTo(170, 245);
    ctx.lineTo(100, 400);
    // Right leg (symmetrical)
    ctx.moveTo(380, 245);
    ctx.lineTo(430, 400);
    ctx.moveTo(400, 245);
    ctx.lineTo(450, 400);
    ctx.stroke();

    // 3. Draw the plank (m2)
    ctx.fillStyle = '#D3D3D3'; // Grey for the plank
    ctx.fillRect(90, 215, 410, 20);
    ctx.strokeRect(90, 215, 410, 20);

    // Label for m2
    ctx.fillStyle = 'black';
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('m', 350, 212);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('2', 366, 217);

    // 4. Draw the block (m1)
    // The block is not filled in the original image, just an outline.
    ctx.beginPath();
    ctx.rect(180, 180, 40, 35);
    ctx.stroke();

    // Label for m1
    ctx.fillStyle = 'black';
    ctx.font = 'italic 22px "Times New Roman"';
    ctx.fillText('m', 188, 195);
    ctx.font = 'italic 16px "Times New Roman"';
    ctx.fillText('1', 204, 200);

    // 5. Draw the force F
    drawArrow(500, 225, 560, 225);
    ctx.font = 'italic bold 22px "Times New Roman"';
    ctx.fillText('F', 565, 225);

    // 6. Draw the caption
    ctx.font = '24px "SimSun", "Songti SC"';
    ctx.fillStyle = 'black';
    ctx.fillText('习题 1-32 图', 230, 450);

</script>
</body>
</html>